<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1.0 定义一个type=file类型的input元素,负责让用户来选择电脑上的文件 -->
    <input type="file" id="file"> <br />

    <button id="btn_uplad">文件提交</button>
    
    <!-- 2.0 导入jquery -->
    <script src="./libs/jquery/jquery.min.js"></script>

    <!-- 3.0 编写文件上传的ajax请求 -->
    <script>
        $(function () {
            $('#btn_uplad').click(function () {
                // 3.0.1 获取到用户选择的文件内容
                let file = document.querySelector('#file').files[0];

                // 3.0.2 将file文件对象追加到FormData实例中即可
                let formData = new FormData();
                // 注意：formData.append()方法中的键需要和文件上传接口定义的名字保持一致
                // file_data是http://157.122.54.189:9092/upload/ajaxapidoc/index.html#api-03-%E4%B8%8A%E4%BC%A0-uploadFile 中定义的
                formData.append('file_data',file);

                // 4.0 编写ajax代码吧formData对象当做data的值传给服务器即可
                /*
                    注意：ajax方法如果发送的是FormData类型的数据，则必须保证如下两个参数的固定写法：
                     contentType:false
                     processData:false
                */ 
                $.ajax({
                    url:'http://127.0.0.1:3001/uploadFile',
                    type:'POST',
                    contentType:false,
                    processData:false,
                    data:formData,
                    success:function(resData){
                        console.log(resData);
                    }
                })

            })
        })
    </script>

</body>

</html>